<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-card style="width: 80%;margin-top: 30px">
        <div style="margin-bottom: 10px;margin-left:5px;font-size: 20px;font-weight: bold;">房间</div>
        <div style="margin-bottom: 10px">
<!--          <el-input style="width: 200px;margin: 0 5px" placeholder="查询房间名" v-model="room_type"></el-input>-->
<!--          <el-button type="primary" @click="loadR(1)">查询</el-button>-->
          <el-button type="warning" @click="dialogRoom = true">新增</el-button>
          <el-button type="success" @click="reset">重置</el-button>
        </div>
        <el-table :data="RoomData" stripe
                  :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
          <el-table-column prop="room_type" label="房间类型"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="amount" label="总数"></el-table-column>
          <el-table-column prop="rest" label="剩余房间数"></el-table-column>
          <el-table-column prop="status" label="审核状态"></el-table-column>
          <el-table-column label="操作" width="150%" align="center">
            <template v-slot="scope">
              <el-button size="mini" type="primary" plain @click="edit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" plain @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="pageSize"
              layout="total,  prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog title="提示" :visible.sync="dialogRoom" width="30%">
      <el-form ref="roomFormRef" :model="roomFrom" :rules="rules" label-width="80px" style="padding-right: 20px">
        <div style="text-align: center; margin-bottom: 20px">
          <el-form-item label="房间类型" prop="room_type">
            <el-input v-model="roomFrom.room_type" placeholder="输入房间类型" type="text"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="roomFrom.price" placeholder="输入价格" type="text"></el-input>
          </el-form-item>
          <el-form-item label="总数" prop="amount">
            <el-input v-model="roomFrom.amount" placeholder="输入总数" type="text"></el-input>
          </el-form-item>
        </div>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="save" @keyup.enter="save">确认</el-button>
          <el-button @click="dialogRoom = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogRoomE" width="30%">
      <el-form ref="roomFormRef" :model="roomFrom" :rules="rules" label-width="80px" style="padding-right: 20px">
        <div style="text-align: center; margin-bottom: 20px">
          <el-form-item label="房间类型" prop="room_type">
            <el-input v-model="roomFrom.room_type" placeholder="输入房间类型" type="text"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="roomFrom.price" placeholder="输入价格" type="text"></el-input>
          </el-form-item>
          <el-form-item label="总数" prop="amount">
            <el-input v-model="roomFrom.amount" placeholder="输入总数" type="text"></el-input>
          </el-form-item>
        </div>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="saveE" @keyup.enter="save">确认</el-button>
          <el-button @click="dialogRoomE = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogRoomD" width="30%">
      <div style="display: flex;justify-content: center">
        <div>
          <div>确认删除房间吗？</div>
          <div style="margin-top: 20px"></div>
          <el-button type="primary" @click="delD">确认</el-button>
          <el-button @click="dialogRoomD = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "room",
  data() {
    return {
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      dialogRoom: false,
      dialogRoomE: false,
      dialogRoomD: false,
      room_type: "",
      RoomData: [],
      hotel: [],
      hotelData: {},
      hotel_id: "",
      roomFrom: {},
      room_id: "",
      pageNum: 1,
      pageSize: 5,
      total: 0,
      rules: {
        room_type: [
          {required: true, message: '请输入房间类型', trigger: 'blur'},
          {pattern: /^[\u4e00-\u9fa5]{1,7}$/, message: '房间类型必须为汉字且最长为7个汉字', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '请输入价格', trigger: 'blur'},
          {pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的价格', trigger: 'blur'}
        ],
        amount: [
          {required: true, message: '请输入房间数量', trigger: 'blur'},
          {pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的房间数量', trigger: 'blur'}
        ],
      },
    }
  },
  methods: {
    load_business_id() {
      this.$request.post('/hotel_search/', {
        "business_id": this.user.id,
      }).then(res => {
        if (res.code === '200') {
          this.hotel = res.data.hotel_list;
          const length = this.hotel.length;
          this.hotel_id = this.hotel[length - 1].id;
          this.hotelData = this.hotel[length - 1]
          this.loadR();
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadR(pageNum) {  //展示房间
      if (pageNum) this.pageNum = pageNum
      const hotel_id = this.hotel_id
      console.log("展示房间", hotel_id)
      this.$request.post('/room_list/', {
        "hotel_id": hotel_id,
        "room_type": this.room_type,
        "page_size": this.pageSize,
        "page_id": this.pageNum,
      }).then(res => {
        if (res.code === '200') {
          this.RoomData = res.data.room_list
          console.log("房间数据", this.RoomData)
          this.total = res.data.amount
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    save() {
      this.$refs['roomFormRef'].validate((valid) => {
        if (valid) {
          this.$request.post('/room_add/', {
            "business_id": this.user.id,
            "hotel_id": this.hotel_id,
            "room_type": this.roomFrom.room_type,
            "price": this.roomFrom.price,
            "amount": this.roomFrom.amount,
          }).then(res => {
            if (res.code === '200') {
              this.$message.success('提交成功')
              this.loadR()
              this.roomFrom = {}
              this.dialogRoom = false
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    edit(row) {
      this.roomFrom = JSON.parse(JSON.stringify(row)) //给from对象赋值,注意要深拷贝数据
      console.log("行数据", this.roomFrom)
      this.dialogRoomE = true //打开弹窗
    },
    saveE() {
      this.$refs['roomFormRef'].validate((valid) => {
        if (valid) {
          this.$request.post('/room_update/', {
            "room_id": this.roomFrom.room_id,
            "room_type": this.roomFrom.room_type,
            "price": this.roomFrom.price,
            "amount": this.roomFrom.amount,
          }).then(res => {
            if (res.code === '200') {
              this.$message.success('更新成功')
              this.loadR()
              location.reload()
              this.roomFrom = {}
              this.dialogRoomE = false
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    del(row) {
      this.roomFrom = JSON.parse(JSON.stringify(row)) //给from对象赋值,注意要深拷贝数据
      this.dialogRoomD = true //打开弹窗
      console.log("行数据2", this.roomFrom)
    },
    delD() {
      console.log("删除房间", this.roomFrom.room_id)
      this.$request.get('/room_delete/' + this.roomFrom.room_id + "/").then(res => {
        if (res.code === '200') {
          this.$message.success('删除成功')
          location.reload()
          this.dialogRoomD = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.loadR(pageNum)
    },
    reset() {
      this.room_type = ''
      this.loadR()
    },
  },
  created() {
    this.load_business_id()
  },
  mounted() {
  },
}
</script>
<style scoped>

</style>